<template>
  <view>
    <Lampgoods>
      <view>

        <view class="miaosha">

          <view class="left">
            <view class="letop">
              <view class="jianq">
                拼团价
              </view>
              <view class="shengyu">
                已拼2524件
              </view>
            </view>
            <view class="prites">
              <view class="price">
                ￥{{goods_Detail.goods_Detailst.unit_price}}
              </view>
              <view class="delt_price">
                原价 ￥{{goods_Detail.goods_Detailst.discount_price}}
              </view>
            </view>
          </view>

          <view class="right" v-if="pintuanxinxi.pintuanxg.is_Pint">
            <view class="rigtop">
              距离拼团结束仅剩
            </view>
            <view class="rigbut">
              <u-count-down :timestamp="pintuanxinxi.timestamp" @change="onChange">
                <view class="time">
                  <view class="time">
                    <view class="time__custom">
                      <text class="time__custom__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days}}</text>
                    </view>
                    <text class="time__doc" style="margin-top: 8rpx;">天</text>
                    <view class="time__custom">
                      <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
                    </view>
                    <text class="time__doc">:</text>
                    <view class="time__custom">
                      <text
                        class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</text>
                    </view>
                    <text class="time__doc">:</text>
                    <view class="time__custom">
                      <text
                        class="time__custom__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
                    </view>
                  </view>
                </view>
              </u-count-down>
            </view>
          </view>
          <view class="right" v-else>
            <view class="rigtopp">
              <p>发起拼团后</p>
              <P> 有十天的时间进行拼团</P>
            </view>
          </view>
        </view>
       <view class="schedule" v-if="pintuanxinxi.pintuanxg.is_Pint">
          <view class="allpric">
            已参与{{pintuanxinxi.pintuanxg.group_size}}人
          </view>
          <view class="jidut">
            <u-line-progress height="20" :percent="pintuanxinxi.pintuanxg.percent" activeColor="#ff4444"
              :striped-active="true"></u-line-progress>
            <view class="price">
              <view class="">
               0人
              </view>
              <view class="">
                {{pintuanxinxi.pintuanxg.group_all}}人
              </view>
            </view> 

     </view>
        </view>
      </view>
     
            <u-toast ref="uToast" />
     <view slot="goumaibut" class="rightt" v-if="pintuanxinxi.pintuanxg.is_Pint && !pintuanxinxi.pintuanxg.is_Ptwc">
        <view class="cart btn u-line-1" @click="yaoqing">邀请好友入团</view>
        <view class="buy btn u-line-1" @click="kaituan" v-if="pintuanxinxi.pintuanxg.is_auto" >待成团(未参与)</view>
        <view class="buy btn u-line-1" @click="yikait" v-else>待成团(已参与)</view>
      </view>
      <view slot="goumaibut" class="rightt" v-if="!pintuanxinxi.pintuanxg.is_Pint">
        <view class="cart btn u-line-1">单独购买</view>
        <view class="buy btn u-line-1" @click="kaituan">一键开团</view>
      </view>
     <view slot="goumaibut" class="rightt" v-if="pintuanxinxi.pintuanxg.is_Ptwc">
        <view class="kanwan btn u-line-1" @click="pintwanc(goods_Detail.goods_Detailst.product_id)">拼团成功完成立即购买</view>
      </view>
    </Lampgoods>
  </view>

</template>

<script setup>
  import Lampgoods from "/src/components/Lampgoods/Lampgoods.vue"
  import {
    addressUserStore
  } from "../../store/address.js"
  const  addressStore= addressUserStore()
  import {
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app';
  const {
    proxy
  } = getCurrentInstance()
  import {
    goodsStore
  } from "../../store/goods.js"
  const goodStore = goodsStore()
  //定义商品id
  const goods_id = ref("")
  onLoad((options) => {
    goods_id.value = options.goods_id
    goodStore.is_Pintuan(options.goods_id)
  });
  const {
    goods_Detail,
    pintuanxinxi
  } = goodStore

  //发起拼团
function kaituan(){
  goodStore.kaituan(goods_id.value)
}
  const timeData = ref({})
  
  function onChange(e) {
    if (e.days === 0 & e.hours === 0 & e.minutes === 0 & e.seconds === 0) {
      if (pintuanxinxi.status !== 'padding')
        goodStore.is_Pintuan(goods_id.value)
    }
    timeData.value = e
  }
  //你已经参与开团无法重复参加
  function yikait(){
    proxy.$refs.uToast.show({
    				title: '你已经参与开团,无法重复参加',
    				type: 'error',
    		
    			})
  }
  //邀请好友
  function yaoqing(){
    proxy.$refs.uToast.show({
    				title: '暂未开放,尽请期待',
    				type: 'error',
    		
    			})
  }
  //购买
  function pintwanc(id){
    addressStore.getdeladdre()
    uni.navigateTo({
      url:`/subPack/submitorder/submitorder?goods_id=${id}&goodcount=${1}`
    })
  }
</script>

<style scoped lang="scss">
  .miaosha {
    margin: 40rpx 0;
    background-color:  #ff4444;
    height: 140rpx;
    display: flex;
    justify-content: space-between;

    .left {
      margin-top: 20rpx;
      margin-left: 20rpx;
      height: 40rpx;
      line-height: 40rpx;

      .letop {
        display: flex;

        // justify-content: space-between;
        .jianq {
          color: #fff;
          font-size: 30rpx;
        }

        .shengyu {
          margin-left: 20rpx;
          color: #fff;
          font-size: 20rpx;
          background-color:  #ab2d2d;
          padding: 0 15rpx;
          border-radius: 10rpx;
        }
      }

      .prites {
        display: flex;
        justify-content: space-between;

        .price {
          margin-top: 20rpx;
          padding-left: 30rpx;
          color: #fff;
          font-size: 35rpx;
        }

        .delt_price {
          text-decoration: line-through;
          margin-top: 20rpx;
          font-size: 20rpx;
          color: #fff;

        }
      }
    }

    .right {
      margin-right: 10rpx;

      .rigtop {
        margin-top: 40rpx;
        font-size: 25rpx;
        color: #fff;
      }

      .rigtopp {
        margin-top: 50rpx;
        font-size: 25rpx;
        text-align: center;
        color: #fff;
      }

      .rigbut {
        .time {
          display: flex;
          align-items: center;

          &__custom {
            margin-top: 4px;
            width: 20px;
            height: 20px;
            background-color:  #e13939;
            border-radius: 4px;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            justify-content: center;
            align-items: center;

            &__item {
              color: #fff;
              font-size: 12px;
              text-align: center;
            }
          }

          &__doc {
            color: #fff;
            padding: 2rpx 8rpx;
            font-size: 25rpx
          }


        }

      }
    }
  }

  .schedule {
    padding: 20rpx 20rpx;

    .allpric {
      font-weight: 600;
      margin-left: 20rpx;
    }

    .jidut {
      padding: 0 5rpx;

      .price {
        padding: 10rpx 0;
        display: flex;
        justify-content: space-between;
        color: #878787;
      }
    }
  }
   
   .kanj{
      text-align: center;
      
     .kanjcg{    
       padding-top: 100rpx;
       // margin-top: 100rpx;
       border-radius: 40rpx;
       text-align: center;
       font-size: 40rpx;
       
       
     }
     .imge{
       margin-left: 70rpx;
       margin-top: 20rpx;
     }
     .but{

     }
   }
  .rightt {

    // border: 1px solid red;
    display: flex;
    margin-left: 20rpx;
    font-size: 28rpx;
    align-items: center;


    .btn {
      text-align: center;
      line-height: 80rpx;
      width: 250rpx;

      color: #ffffff;
    }

    .cart {
      background-color: #ff7900;
      border-radius: 40rpx 0 0 40rpx;
    }

    .buy {
      background-color: #ff4444;
      border-radius: 0 40rpx 40rpx 0;
    }
    .kanwan{
      width: 400rpx;
      margin-left: 40rpx;
      background-color: #ff4444;
      border-radius: 40rpx ;
    }
  }
</style>